<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<!-- 
	 Vue框架数据流向：m -> model, v -> view
	 M -> V
	 改变model，view会随之改变
	 V -> M
	 
	 MVVM 框架（双向数据绑定）
	 Vue没有完全遵循双向数据绑定，如果要实现数据绑定需要使用 v-model 显式指定双向数据绑定
	 -->
	<div id="app">
		<div>
			<input type="text" v-model="itemText">
			<button v-on:click="handleClick">创建</button>
		</div>
		<!-- <h2>{{ itemText }}</h2> -->
		<button>排序</button>
		<ul>
			<li v-for="(item, index) of list">
				{{ index + 1 }}. {{ item.text }}
				
				<button>x</button>
			</li>
			<!-- <my-li v-for="(item, index) of list"></my-li> -->
		</ul>
		<div>总计：{{ list.length }} 个</div>
	</div>
	
	<script src="vue.js"></script>
	<script>
		// 自定义组件 或者叫自定义标签
		// Vue.component(组件名字, 组件的配置项)
		Vue.component('my-li', {
			// 模板
			template: "<li><b>{{ count }}</b><button v-on:click='addCount'>count++</button></li>",
			data: function() {
				return {
					count: 0
				}
			},
			methods: {
				addCount() {
					this.count++
					console.log(this)
				}
			}
		})
		
		
		const app = new Vue({
			el: "#app",
			data: {
				itemText: "",
				list: [
					{ id: 1, text: "HTML" },
					{ id: 21, text: "CSS" },
					{ id: 13, text: "JavaScript" },
					{ id: 40, text: "Vue" },
				]
			},
			methods: {
				handleClick() {
					if(!this.itemText) {
						return false
					}
					this.list.push({
						id: Date.now(), 
						text: this.itemText 
					})
					this.itemText = ""
				},
			}
		})
	</script>
</body>
</html>